<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :title="$t('sys_equ_title_show')"
    :append-to-body="true"
    width="520px"
    top="5vh"
    :before-close="handleClose"
  >
    <div class="content">
      <!-- 通道 -->
      <div class="line">
        <span>{{ $t("sys_equ_chan") }}: </span>
        <span>{{ row.channel }}</span>
      </div>
      <!-- 通道名称 -->
      <div class="line">
        <span>{{ $t("sys_equ_chanName") }}: </span>
        <span>{{ row.camera_name }}</span>
      </div>
      <!-- 协议 -->
      <div class="line" v-show="row.protocol">
        <span>{{ $t("sys_equ_protocol") }}: </span>
        <span>{{ formatProtocal(row.protocol) }}</span>
      </div>
      <!-- 厂商 -->
      <div class="line" v-show="row.vendor">
        <span>{{ $t("manufacturer") }}: </span>
        <span>{{ formatVendor(row.vendor) }}</span>
      </div>
      <!-- 取帧间隔(s) -->
      <div class="line" v-show="row.frame_interval">
        <span>
          <el-tooltip
            placement="top-end"
            effect="light"
            :content="$t('sys_equ_frame_interval_tips')"
          >
            <i class="el-icon-question"></i> </el-tooltip
          >{{ $t("sys_equ_frame_interval") }}:
        </span>
        <span>{{ row.frame_interval }}</span>
      </div>
      <!-- 抓拍策略 -->
      <div class="line" v-show="row.snap_mode">
        <span>
          <el-tooltip placement="top-end" effect="light">
            <div slot="content">
              {{ $t("sys_equ_clMod_jz_tips") }}<br />
              {{ $t("sys_equ_clMod_ds_tips") }}<br />
              {{ $t("sys_equ_clMod_ss_tips") }}
            </div>
            <i class="el-icon-question"></i> </el-tooltip
          >{{ $t("sys_equ_strategy") }}:
        </span>
        <span>{{ formatSnapMode(row.snap_mode) }}</span>
      </div>
      <!-- 人像库 -->
      <div class="line">
        <span>{{ $t("sys_equ_libTag") }}: </span>
        <template v-if="row.lib_ids">
          <span class="tag-blue" v-for="item in lib_list_value" :key="item">{{
            item
          }}</span>
        </template>
        <span v-else>{{ $t("libFaceIsNull") }}</span>
      </div>
      <!-- 车辆库 -->
      <div class="line" v-show="row.vehicle_lib_ids">
        <span>{{ $t("vehiclelibraryNameTip") }}: </span>
        <span class="tag-blue" v-for="item in vehicle_lib_value" :key="item">{{
          item
        }}</span>
      </div>
      <!-- 任务类型 -->
      <div class="line" v-show="row.task_type">
        <span>{{ $t("task_type") }}: </span>
        <span class="tag-blue" v-for="item in task_list_value" :key="item">{{
          item
        }}</span>
      </div>
      <!-- 重复告警最小间隔(s) -->
      <div class="line" v-show="row.dup_alarm_gap">
        <span>{{ $t("indoor.warn_time") }}: </span>
        <span>{{ row.dup_alarm_gap }}</span>
      </div>
      <!-- 活体检测开关 -->
      <div class="line" v-show="row.liveness_switch !== void 0">
        <span>{{ $t("sys_equ_liveness_switch") }}: </span>
        <span>{{ formatLivenessSwitch(row.liveness_switch) }}</span>
      </div>
      <!-- ip地址 -->
      <div class="line" v-show="is_ip_show">
        <span>{{ $t("sys_equ_ipAddr") }}: </span>
        <span>{{ row.ip }}</span>
      </div>
      <!-- 端口 -->
      <div class="line" v-show="row.port">
        <span>{{ $t("sys_equ_port") }}: </span>
        <span>{{ row.port }}</span>
      </div>
      <!-- 用户名 -->
      <div class="line" v-show="row.camera_user">
        <span>{{ $t("sys_equ_userName") }}: </span>
        <span>{{ row.camera_user }}</span>
      </div>
      <!-- 密码 -->
      <div class="line" v-show="is_camera_pwd_show">
        <span>{{ $t("sys_equ_password") }}: </span>
        <span>******</span>
      </div>
      <!-- 平台地址 -->
      <div class="line" v-show="row.trd_login_url">
        <span>{{ $t("sys_equ_trd_login_url") }}: </span>
        <span>{{ row.trd_login_url }} </span>
      </div>
      <!-- 取流地址 -->
      <div class="line" v-show="row.trd_fetch_stream_url">
        <span>{{ $t("sys_equ_trd_stream_url") }}: </span>
        <span>{{ row.trd_fetch_stream_url }} </span>
      </div>
      <!-- SIP服务器IP -->
      <div class="line" v-if="is_sipport_show">
        <span>{{ $t("sys_equ_ip_address_spi") }}: </span>
        <span>{{ row.ip }} </span>
      </div>
      <!-- SIP服务器端口 -->
      <div class="line" v-if="is_sipport_show">
        <span>{{ $t("sys_equ_port_spi") }}: </span>
        <span>{{ row.port }} </span>
      </div>
      <!-- SIP服务器ID -->
      <div class="line" v-if="is_server_sip_id_show">
        <span>{{ $t("sys_equ_serverID") }}: </span>
        <span>{{ row.server_sip_id }} </span>
      </div>
      <!-- SIP相机ID -->
      <div class="line" v-if="is_camera_sip_id_show">
        <span>{{ $t("sys_equ_cameraID") }}: </span>
        <span>{{ row.camera_sip_id }} </span>
      </div>
      <!-- 鉴权 -->
      <div class="line" v-if="is_auth_show">
        <span>{{ $t("auth") }}: </span>
        <el-switch
          disabled
          v-model="auth"
          :active-value="1"
          :inactive-value="0"
        />
      </div>
      <!-- gb28181 密码 -->
      <div class="line" v-if="is_auth_camera_pwd_show">
        <span>{{ $t("sys_equ_password") }}: </span>
        <span>****** </span>
      </div>
      <!-- URL -->
      <div class="line" v-show="row.url">
        <span>{{ $t("inputViperUrl") }}: </span>
        <span>{{ row.url }} </span>
      </div>
      <!-- 阈值% -->
      <div class="line" v-show="row.threshold">
        <span>{{ $t("sys_equ_threshold") }}: </span>
        <span>{{ row.threshold }}</span>
      </div>
      <!-- 活体检测阈值(%) -->
      <div class="line" v-show="row.liveness_threshold">
        <span>{{ $t("sys_equ_liveness_threshold") }}: </span>
        <span>{{ row.liveness_threshold }}</span>
      </div>
      <!-- 在线状态 -->
      <div class="line" v-show="row.status">
        <span>{{ $t("sys_equ_onlineStat") }}: </span>
        <span>{{ formatStatus(row.status) }}</span>
      </div>
      <div class="line" v-show="row.facesize_min">
        <span>{{ $t("minimum_face_pix_setting") }}: </span>
        <span>{{ row.facesize_min }}</span>
      </div>
      <div class="line" v-show="row.facesize_max">
        <span>{{ $t("maximum_face_pix_setting") }}: </span>
        <span>{{ row.facesize_max }}</span>
      </div>
      <div class="line" v-show="row.bodysize_min">
        <span>{{ $t("minimum_body_pix_setting") }}: </span>
        <span>{{ row.bodysize_min }}</span>
      </div>
      <div class="line" v-show="row.bodysize_max">
        <span>{{ $t("maximum_body_pix_setting") }}: </span>
        <span>{{ row.bodysize_max }}</span>
      </div>
      <div v-if="row.camera_mode === 'VIDEO'" class="video-box">
        <RoiVideo
          class="roi-wrapper"
          :status="row.status"
          ref="roiVideoRef"
          :formData="row"
          editType="show"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import * as CONSTANT from "./CONSTANT";
import RoiVideo from "./RoiVideo";
const IMAGE = "IMAGE";
const VIDEO = "VIDEO";
export default {
  components: { RoiVideo },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
    vehicleLibList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    lib_list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    const {
      equip_type_list,
      task_type_list,
      protocol_list,
      status_list,
      snap_mode_list,
      liveness_switch_list,
      vendor_list,
    } = CONSTANT;
    return {
      liveness_switch_list,
      equip_type_list,
      task_type_list,
      protocol_list,
      status_list,
      snap_mode_list,
      vendor_list,
    };
  },
  computed: {
    is_VIDEO() {
      return this.row.camera_mode == VIDEO;
    },
    is_IMAGE() {
      return this.row.camera_mode == IMAGE;
    },
    is_auth_show() {
      return this.is_VIDEO && this.row.protocol === "gb28181";
    },
    auth() {
      return this.row.camera_pwd ? 1 : 0;
    },
    is_auth_camera_pwd_show() {
      return (
        ["gb28181"].includes(this.row.protocol) &&
        this.is_VIDEO &&
        this.auth === 1
      );
    },
    is_server_sip_id_show() {
      return this.is_VIDEO && this.row.protocol === "gb28181";
    },
    is_ip_show() {
      return (
        this.is_IMAGE ||
        (["onvif"].includes(this.row.protocol) && this.is_VIDEO)
      );
    },
    is_sipport_show() {
      return (
        this.is_IMAGE || (this.row.protocol === "gb28181" && this.is_VIDEO)
      );
    },
    is_camera_user_show() {
      return (
        this.is_IMAGE ||
        (["onvif", "vcn"].includes(this.row.protocol) && this.is_VIDEO)
      );
    },
    is_camera_pwd_show() {
      return this.is_camera_user_show;
    },
    lib_list_value() {
      if (!this.row.lib_ids) return [];
      return this.row.lib_ids.split(",").map((item) => {
        const info = this.lib_list.find((lib) => lib.lib_id == item);
        return info && info.lib_name;
      });
    },
    vehicle_lib_value() {
      if (!this.row.vehicle_lib_ids) return [];
      return this.row.vehicle_lib_ids.split(",").map((item) => {
        const info = this.vehicleLibList.find((lib) => lib.lib_id == item);
        return info && info.lib_name;
      });
    },
    task_list_value() {
      if (!this.row.task_type) return [];
      return this.row.task_type.split(",").map((item) => {
        const info = this.task_type_list.find((lib) => lib.value == item);
        return info && info.label;
      });
    },
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    row: {
      handler(val) {
        if (val && Object.keys(val).length && this.$refs.roiVideoRef) {
          // 默认绘制区域
          this.$nextTick(() => {
            this.$refs.roiVideoRef.rectData =
              val.camera_roi &&
              val.camera_roi.split(",").map((item) => item / 4);
            this.$refs.roiVideoRef.rect_draw();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    confirm() {
      this.formData = {};
      this._visible = false;
    },
    handleClose(done) {
      this.confirm();
      done();
    },
    formatProtocal(cellValue) {
      if (!cellValue) return "";
      return this.protocol_list.find((item) => item.value == cellValue).label;
    },
    formatStatus(cellValue) {
      if (!cellValue) return "";
      return this.status_list.find((item) => item.value == cellValue).label;
    },
    formatSnapMode(cellValue) {
      if (!cellValue) return "";
      return this.snap_mode_list.find((item) => item.value == cellValue).label;
    },
    formatLivenessSwitch(cellValue) {
      if (cellValue === void 0) return "";
      return this.liveness_switch_list.find((item) => item.value == cellValue)
        .label;
    },
    formatStatus(cellValue) {
      if (!cellValue) return "";
      return this.status_list.find((item) => item.value == cellValue).label;
    },
    formatVendor(cellValue) {
      if (!cellValue) return "";
      return this.vendor_list.find((item) => item.value == cellValue).label;
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    .line {
      width: 100%;
      display: flex;
      height: 40px;
      line-height: 40px;
      span:first-of-type {
        width: 150px;
        text-align: right;
        margin-right: 20px;
      }
    }
    .tag-blue {
      background: #f0f2f5;
      color: #53d3e8;
      padding: 5px;
      text-align: center;
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 5px;
      width: auto;
      line-height: 25px;
      height: 35px;
      border-radius: 5px;
    }
  }
}
</style>
